<template>
  <div class="header-title">
    <div class="container">
      <a class="link">Nutrition System</a>
      <span class="hover-container">
    <span class="link-text" aria-hidden="true" style="--x:783px; --y:214px;">Nutrition System</span>
  </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'header-title',
  }
</script>

<style scoped lang="less">
  .header-title{
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
    text-transform: uppercase;
    font-size: 25px;
    /*color: #f9e8d7;*/
    /*text-shadow: 0 2px 2px #c4b59d, 0px -2px 1px #fff;*/
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    pointer-events: none;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/righteous/v9/1cXxaUPXBpj2rGoU7C9WhnGFq8Kk1doH.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/righteous/v9/1cXxaUPXBpj2rGoU7C9WiHGFq8Kk1Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  .container {
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    font-size: 8px;
  }

  a {
    text-decoration: none;
  }

  .link {
    z-index: 1;
    position: relative;
    display: inline-block;
    font-size: 3em;
    color: #808080;
    text-transform: uppercase;
    transition: color 275ms ease;
  }
  .link:hover {
    color: #333;
  }
  .link:hover ~ .hover-container .link-text {
    opacity: 1;
  }
  .link:hover ~ .hover-container .image-container {
    opacity: 1;
  }

  .link-text {
    z-index: 2;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 3em;
    color: #fff;
    text-transform: uppercase;
    pointer-events: none;
    -webkit-clip-path: circle(37.5px at var(--x) var(--y));
    clip-path: circle(37.5px at var(--x) var(--y));
    opacity: 0;
    transition: opacity 250ms ease;
  }
</style>
